<template>
  <div class="chart-wrap">
    <!-- <div class="title">{{ title }}</div> -->
    <div class="myCharts" ref="myCharts"></div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echarts from 'echarts';
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
  },
  computed: {
    total() {
      return this.dataSource.reduce((a, b) => a + b.value, 0);
    },
  },
  data() {
    return {
      myCharts: null,
      colorList: ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'],
    };
  },
  mounted() {
    this.initChart();
    this.getChart();
  },
  watch: {
    dataSource(val) {
      if (val) {
        this.$nextTick(() => {
          this.getChart();
        });
      } else {
        if (this.myCharts) this.myCharts.clear();
      }
    },
  },
  beforeDestroy() {
    if (this.myCharts) {
      this.myCharts.dispose();
      this.myCharts = null;
    }
  },
  methods: {
    initChart() {
      this.myCharts = echarts.init(this.$refs.myCharts);
    },
    getChart() {
      const _this = this;
      const dataStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          shadowBlur: 40,
          shadowColor: 'rgba(40, 40, 40,0.05)',
        },
      };
      const options = {
        color: ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'],
        title: {
          text: this.title,
          x: 'center',
          top: '2%',
          left: '2%',
          textStyle: {
            fontSize: 14,
            color: '#6c6c6c',
          },
        },
        tooltip: {
          padding: [10, 16, 10, 16],
          formatter: '{a} <br/>{b}: {c}',
        },
        legend: {
          data: this.dataSource.map((it) => it.name),
          orient: 'vertical',
          left: '50%',
          top: 'center',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          icon: 'circle',
          formatter: function (name) {
            const item = _this.dataSource.find((it) => it.name === name);
            const percent = _this.total === 0 ? 0 : (item.value / _this.total * 100).toFixed(2);
            return `{name|${name}}{value|${item.value}}{percent|${percent}%}`;
          },
          textStyle: {
            lineHeight: 12,
            rich: {
              name: {
                width: 80,
                fontSize: 14,
                color: '#666',
              },
              value: {
                width: 30,
                fontSize: 14,
                color: '#666',
                align: 'right',
              },
              percent: {
                width: 72,
                fontSize: 14,
                color: '#666',
                align: 'right',
              },
            },
          },
        },
        series: [{
          name: this.title || '机构',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['26%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: dataStyle,
          label: {
            normal: {
              show: false,
              position: 'center',
            },
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.percent.toFixed(0) + '%';
              },
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
          },
          labelLine: {
            normal: {
              show: true,
            },
          },
          data: this.dataSource,
        }],
      };
      this.myCharts.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-wrap {
  height: 200px;
  position: relative;

  .title {
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.85);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.myCharts {
  height: 100%;
  width: 100%;
}
</style>
